<template>
    <div class="flex flex-col h-screen">
        <div class="bg-white shrink-0">
            <div class="relative py-3 text-base text-center text-gray-700"
                @click="mode = mode == 'info' ? 'waterfall' : 'info'">
                <Back class=" top-1/2 -translate-y-1/2 absolute !bg-transparent" />
                <span>{{categorys[active]}}</span>
            </div>
        </div>

        <div class="shop-category-goods flex flex-col overflow-hidden text-sm text-gray-600 bg-gray-100 border-t grow">
            <Tabs active-el-position="br" v-model:active="active">
                <TabItem v-for="(item, index) in categorys" :title="item" />
            </Tabs>
            <div class="mt-2 flex items-center justify-around  text-gray-400 shrink-0">
                <div @click="item.handler" :class="{ 'text-gray-800': index == currentSort }"
                    v-for="(item, index) in sorts">{{ item.name }}</div>
                <div>筛选</div>
            </div>
            <div class="pt-2 px-4 overflow-hidden grow">
                <UpPullLoad @trigger="loadMore">
                    <Goods :data="data" :mode="mode" />
                </UpPullLoad>
            </div>
        </div>
        <Toast ref="toastRef" />
    </div>
</template>
    
<script setup lang='ts'>
import { tmpData } from '~/views/home/tmp';

const categorys = [
    '全部', '笔记本', '语言', '图形', '深度优先', '嵌套', '多任务', 'HTTP/HTTPS', 'API', 'WebSockets'
];
const active = ref(0);
const toastRef = ref();
const mode = ref<'info' | 'waterfall'>('info');
const currentSort = ref(0);
const data = ref<any[]>(tmpData.slice(0, 7))
const loadMore = ({ done }: any) => {
    setTimeout(() => {
        data.value.push(...tmpData.slice(0, 7))
        done()
    }, 200);
}
const sorts = [
    { name: '综合推荐', handler() { currentSort.value = 0 } },
    { name: '销量', handler() { currentSort.value = 1; } },
    { name: '价格', handler() { currentSort.value = 2 } },
]

const loadGoods = () => {
    data.value = [];
    const hide = toastRef.value.loading({ duration: 0, message: '请稍等...' });
    setTimeout(() => {
        data.value = tmpData.slice(0, 7);
        hide();
    }, 200);
}
watch(currentSort, loadGoods)
watch(active, loadGoods)
</script>
    
<style></style>